<template>
  <div class="app-container">
    <el-form :model="param" :inline="true" label-width="68px">
      <el-form-item style="width:240px">
        <div>出发城市</div>
        <city-select v-model="param.boxStartCity" @cityId="startCityId" style="width: 100%;"></city-select>
      </el-form-item>
      <el-form-item style="width:240px">
        <div>抵达城市</div>
        <city-select v-model="param.boxBackCity" @cityId="backCityId" style="width: 100%;"></city-select>
      </el-form-item>
      <el-form-item style="width:240px">
        <div>车型</div>
        <el-select v-model="param.carType" style="width:100%" clearable placeholder="选择车型">
          <el-option v-for="item in param.carTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="width:240px">
        <div>车长</div>
        <el-select v-model="param.carLength" style="width:100%" placeholder="选择车长">
          <el-option v-for="item in param.carLengthOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 400px;">
        <div>载重</div>
        <el-select v-model="param.loadWeight" style="width:100%" placeholder="选择载重">
          <el-option v-for="item in param.loadWeightOptions" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <el-button @click="handleReset" :icon="Refresh" style="margin-top: 30px">重置</el-button>
      <el-button @click="getTableData" :icon="Search" type="primary" style="margin-top: 30px">查询</el-button>
    </div>

    <Table ref="tableRef" v-bind="table" @pageChange="onTablePageChange" @activEdit="activEdit" @boxPublish="boxPublish"
      @boxDown="boxDown" @isDelete="isDelete">
    </Table>

    <!-- dialog -->
    <el-dialog v-model="param.dialogVisible" title="系统提示" width="500">
      <span>确认删除？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="activDelete">是的</el-button>
          <el-button type="primary" @click="param.dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table'
// import { getTable,statusCount, publishPitch, downPitch, deletePitch } from '@/api/boxRent'
import citySelect from '@/components/citySelect'
import { carrierPage, custPage, getCarInfo, submitSave, submitPublish, pitchDelete, onShelf, offShelf, statusCount } from '@/api/carList'
import orderInfo from '@/store/modules/order'
import { computed, onMounted, reactive, ref } from 'vue';
import {
  Plus,
  Delete,
  Promotion,
  Edit,
  Message,
  Download,
  Upload,
  ChatDotRound
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus';

const param = reactive({
  loading: false,
  pageNum: 1,
  pageSize: 10,
  dialogVisible: false,
  carTypeFilter: { 5: '标准', 10: '高板', 15: '平板', 20: '半挂车' },
  carLengthFilter: { 5: '6 - 8', 10: '9 - 10', 15: '11 - 12', 20: '13 - 15', 25: '16 - 17.5' },
  carLoadFilter: { 5: '3 - 5', 10: '6 - 10', 15: '11 - 15', 20: '16 - 20', 25: '21 - 25', 30: '26 - 30', 35: '31 - 35' },
  stateFilter: { 5: '出租中', 10: '仓库中', 15: '待发布' }, //5 - 出租中 10 - 仓库中 15 - 待发布
  stateColor: { 5: '#22A86D', 10: '#2158F3', 15: '#2158F3' },
  carTypeOptions: [ // 5 - 标准 10 - 高板 15 - 平板 20 - 半挂车
    { value: '5', label: '标准', },
    { value: '10', label: '高板', },
    { value: '15', label: '平板', },
    { value: '20', label: '半挂车', },
  ],
  carLengthOptions: [ //5 - (6 - 8米) 10 - (9 - 10米) 15 - (11 - 12米) 20 - (13 - 15米) 25 - (16 - 17.5米)
    { value: '5', label: '6 - 8米', },
    { value: '10', label: '9 - 10米', },
    { value: '15', label: '11 - 12米', },
    { value: '20', label: '13 - 15米', },
    { value: '25', label: '16 - 17.5米', },
  ],
  loadWeightOptions: [ // 5 - (3 - 5吨) 10 - (6 - 10吨) 15 - (11 - 15吨) 20 - (16 - 20吨) 25 - (21 - 25吨) 30 - (26 - 30吨) 35 - (31 - 35吨)
    { value: '5', label: '3 - 5吨', },
    { value: '10', label: '6 - 10吨', },
    { value: '15', label: '11 - 15吨', },
    { value: '20', label: '16 - 20吨', },
    { value: '25', label: '21 - 25吨', },
    { value: '30', label: '26 - 30吨', },
    { value: '35', label: '31 - 35吨', },
  ],
  beginTotalRentQty: '',
  endTotalRentQty: '',
  boxBackCity: '',
  boxStartCity: '',
  startCityOptions: [],
  backCityOptions: [],
  typeList: []
});


const table = reactive({
  // 列表数据（必传）
  data: [],
  // 表头内容（必传，注意格式）
  header: [
    // { key: 'releaseRentId', colWidth: '220', title: 'releaseRentId', type: 'text', isCheck: true },
    // { key: 'id', colWidth: '220', title: 'ID', type: 'text', isCheck: true },
    { key: 'departureCityName', key2: 'departureCountryName', colWidth: '160', title: '出发城市', type: 'twoRow', isCheck: true },
    { key: 'destinationCityName', key2: 'destinationCountryName', colWidth: '160', title: '抵达城市', type: 'twoRow', isCheck: true },
    { key: 'plateNumber', colWidth: '120', title: '车牌号', type: 'text', isCheck: true },
    { key: 'vehicleModel', colWidth: '100', title: '车型', type: 'filter', filter: param.carTypeFilter, isCheck: true },
    { key: 'vehicleLength', colWidth: '100', title: '车长 / 米', type: 'filter', filter: param.carLengthFilter, isCheck: true },
    { key: 'loadWeight', colWidth: '100', title: '载重 / 吨', type: 'filter', filter: param.carLoadFilter, isCheck: true },
    { key: 'createTime', colWidth: '150', title: '发布日期', sortable: true, type: 'text', isCheck: true },
    // { key: 'status', colWidth: '120', title: '发布状态', type: 'filter', filter: param.stateFilter, cFilter: param.stateColor, isCheck: true },
    { key: 'carrierName', colWidth: '150', title: '车主', sortable: true, type: 'text', isCheck: true },
    {
      key: 'operate',
      colWidth: '200',
      title: '操作',
      type: 'operate',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          name: '联系客服',
          icon: 'ChatDotRound',
          command: 'activEdit',
        },
        // {
        //   content: '下架',
        //   icon: 'Download',
        //   command: 'boxDown',
        //   isShow: (row: { status: string; }) => {
        //     return row.status == '5';
        //   },
        // },

      ],
    },
  ],
  // table配置项（必传）
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  }
});

const startCityId = (id: string) => {
  param.boxStartCity = id
}
const backCityId = (id: string) => {
  param.boxBackCity = id
}

//   过滤条件： 承运公司Id:carrierId  承运公司名称: carrierName  出发地城市Id:departureCityId  出发地城市名称: departureCityName 到达地城市Id:destinationCityId  到达地城市名称: destinationCityName
// # 车牌号:plateNumber 车型:vehicleModel 5 - 标准 10 - 高板 15 - 平板 20 - 半挂车  车长:vehicleLength 5 - (6 - 8米) 10 - (9 - 10米) 15 - (11 - 12米) 20 - (13 - 15米) 25 - (16 - 17.5米)
// # 载重:loadWeight 5 - (3 - 5吨) 10 - (6 - 10吨) 15 - (11 - 15吨) 20 - (16 - 20吨) 25 - (21 - 25吨) 30 - (26 - 30吨) 35 - (31 - 35吨)
// # 排放标准:emissionStandard 5 - 国IV 10 - 国V 15 - 国VI
// # 发布状态:status 5 - 出租中 10 - 仓库中 15 - 待发布
function getTableData() {
  const data = {
    pageNum: param.pageNum,
    pageSize: param.pageSize,

    departureCityId: param.boxStartCity || null,
    destinationCityId: param.boxBackCity || null,
    vehicleModel: param.carType,
    vehicleLength: param.carLength,
    loadWeight: param.loadWeight,
  };
  table.config.loading = true;
  // 获取列表数据
  custPage(data).then((res: any) => {
    table.data = JSON.parse(JSON.stringify(res.data.list));
    table.config.total = res.data.total;
  });
  table.config.loading = false;
  // return
  // statusCount(data).then((res: { data: any }) => {
  //   const resList = res.data // [ { status: 5, totalQty: 0 },{ status: 10, totalQty: 0 },{ status: 15, totalQty: 0 } ]
  //   const list = [{ id: 0, name: '全部', num: 0 }, { id: 5, name: '已发布', num: 0 }, { id: 10, name: '车库中', num: 0 }, { id: 15, name: '待发布', num: 0 }]
  //   let total = 0;
  //   list.forEach(item => {
  //     resList.forEach((obj: { status: number; totalQty: number }) => {
  //       if (item.id == obj.status) {
  //         item.num = obj.totalQty
  //         total += obj.totalQty
  //       }
  //     })
  //   })
  //   list.map(obj => {
  //     if (obj.id == 0) {
  //       obj.name = obj.name + '(' + total + ')'
  //     } else {
  //       obj.name = obj.name + '(' + obj.num + ')'
  //     }
  //   })
  //   param.typeList = list
  // });
  // table.config.loading = false;
}

function handleReset(data: any) {

}

//编辑
const router = useRouter();
const activEdit = (row: { id: any }) => {
  orderInfo().setRowData(row)
  router.push({
    path: '/carServer/searchCarInfo'
  })
};

//上架/下架  
const tableRef = ref({ multipleSelection: [] })
const selection = computed(() => {
  let ids: any[] = []
  tableRef.value.multipleSelection.map((item: any) => {
    ids.push(item.id)
  })
  return ids
})
const boxPublish = (row: { id: any }, opt: string) => {
  let ids: any[] = []
  if (opt == 'pitch') {
    ids = selection.value
  } else {
    ids = [row.id]
  }
  if (ids.length == 0) {
    ElMessage.warning('请选择要上架的数据')
    return
  }
  onShelf(ids).then(() => {
    getTableData()
  })
};
const boxDown = (row: any, opt: string) => {
  let ids: any[] = []
  if (opt == 'pitch') {
    ids = selection.value
  } else {
    ids = [row.id]
  }
  if (ids.length == 0) {
    ElMessage.warning('请选择要下架的数据')
    return
  }
  offShelf(ids).then((res: any) => {
    getTableData()
  })
};

//删除 
let deleteList = ref([])
const isDelete = (row: any, opr: any) => {
  if (opr == 'pitch') {
    deleteList.value = selection.value
  } else {
    deleteList.value = [row.id]
  }
  if (deleteList.value.length == 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }
  param.dialogVisible = true;
};
const activDelete = () => {
  let ids = [...deleteList.value]
  if (ids.length == 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }
  pitchDelete(ids).then((res: any) => {
    getTableData()
  })
  param.dialogVisible = false;
};


//分页
function onTablePageChange(page: { pageNum: number; pageSize: number }) {
  param.pageNum = page.pageNum;
  param.pageSize = page.pageSize;
  getTableData();
};


onMounted(() => {
  getTableData()

})


//
const handleTypeChange = (value: any) => {
  console.log(value)
  param.type = value
  getTableData()
};

</script>